<template>
  <div class="people-container">
    <h1>用户列表</h1>
    <table class="user-table">
      <thead>
        <tr>
          <th>用户 ID</th>
          <th>用户名</th>
          <th>密码</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.password }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 定义响应式数据
const users = ref([]);

// 定义获取用户数据的方法
const fetchUsers = async () => {
  try {
    const response = await axios.get("http://localhost:3000/users");
    users.value = response.data;
  } catch (error) {
    console.error('获取用户数据失败:', error);
  }
};

// 组件挂载时调用获取用户数据的方法
onMounted(() => {
  fetchUsers();
});
</script>

<style scoped>
.people-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.user-table th,
.user-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.user-table th {
  background-color: #f2f2f2;
}
</style>